<!-- 用户信息 -->
<template>
    <view class="user-card">
        <!-- 首页登录-loading -->
        <view class='user_wrap_grey' v-if="showType=='01'">
            <view class='left_img inline_bl'>
                <image src="http://img.gooagoo.com/demominiprogram/images/head.png"></image>
            </view>
            <view class='user_info inline_bl'></view>
        </view>
        <!-- 首页未登录  -->
        <view class="user_wrap_grey" v-if="showType == '02'">
            <view class="left_img inline_bl">
                <image src="http://img.gooagoo.com/demominiprogram/images/head.png"></image>
            </view>
            <view class="user_info_login inline_bl">
                <view class="user_name">登录/注册</view>
                <view class="user_text">管理数字小票</view>
            </view>
            <view class="user_info inline_bl">
                <view class="bt_wrap_btn">登录</view>
            </view>
        </view>
        <!-- 首页已登录 -->
        <view class="user_wrap_grey" v-if="showType == '03'">
            <view class='left_img inline_bl'>
                <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                    <image :src="avatarUrl"></image>
                </button>
            </view>
            <view class='user_info inline_bl' style="width: 65%;height:100%">
                <view class='user_name'>
                    <view class="nick_name">
                        <text class="inner_text">{{ useInfo.nickName || useInfo.showphone || 'name' }}</text>
                        <view v-if="useInfo.level" class="level_wrap">
                            <image :src='useInfo.levelImg' style="" class="icon_img"></image>
                            <text class='level'>{{ useInfo.level }}</text>
                        </view>
                    </view>
                </view>
                <view class='user_text_index'>
                    <view class="weui-flex">
                        <view class='weui-flex__item icon_item'>
                            <view class='fs_10  color_999 t_l'>
                                <text class="jf_text">积分-</text>
                                <text class='num'>{{ useInfo.integralSums || 0 }}</text>
                                <text class="grey_dot"></text>
                                <text class=" jf_text">优惠券</text>
                                <text class='num'>{{ useInfo.couponSize || 0 }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="toCenter pos_ab">
                <image src='http://img.gooagoo.com/demominiprogram/demopic/go_inlog.png'></image>
            </view>
        </view>

    </view>
</template>
<script setup>
import { useOutsideUserInfoStore } from '../../../store/userInfo'
const useInfoStore = useOutsideUserInfoStore()

defineOptions({
    name: 'UserInfoCard'
})
const props = defineProps({
    // 请求后端接口数据，加载中 true-加载中
    loadingStatus: {
        type: Boolean,
    }
})
const avatarUrl = ref('https://img.gooagoo.com/demominiprogram/images/head.png')

const useInfo = ref({})
const onChooseAvatar = (e)=>{
    console.log('e', e)
    avatarUrl.value = e.detail.avatarUrl
}
// 用户信息
const userInfoData = computed({
    get() {
        return useInfoStore.userInfo
    },
    set(val) {
        // console.info('val', val)
    }
})
// 手机号授权状态 false-未授权 true-已授权
const isCRMUser = computed(() => {
    return useInfoStore.isCRMUser
});
// 展示模块
const showType = computed(() => {
    let showType = '';
    if (isCRMUser.value === true && props.loadingStatus == false) {
        // 已加载 - 已授权
        showType = '03'
    }else if(isCRMUser.value === false && props.loadingStatus == false) {
        // 已加载 -需登陆
        showType = '02'
    } else if (props.loadingStatus === true) {
        // 加载中
        showType = '01'
    } 
    return showType;
});


</script>
<style scoped lang="scss">
.user-card {
    width: 100%;

    .user_wrap_grey {
        height: 160rpx;
        background: url(http://img.gooagoo.com/demominiprogram/demopic/delu_bg.png) no-repeat center center;
        background-size: cover;
        border-radius: 4px;
        position: relative;
        display: flex;
        // border: 1px solid #333;

        .inline_bl {
            display: inline-block;
        }

        .left_img {
            vertical-align: middle;
            .avatar-wrapper{
                padding: 0;
                &::after{
                    border: none;
                }
            }

            image {
                margin: 40rpx 28rpx 40rpx 30rpx;
                display: inline-block;
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
            }
        }

        .user_info_login {
            display: inline-block;
            vertical-align: middle;

            // height: 100%;
            .user_name {
                font-family: PingFangSC-Regular, PingFang SC;
                margin-top: 38rpx;
                font-size: 32rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #666;
                margin-bottom: 18rpx;
                display: inline-block;
                position: relative;
                width: 100%;
                height: 40rpx;
            }

            .user_text {
                height: 28rpx;
                font-size: 10px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999;
                line-height: 28rpx;
            }
        }

        .user_info {
            display: inline-block;
            vertical-align: top;

            .user_name {
                margin-top: 40rpx;
                font-size: 40rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333;
                margin-bottom: 18rpx;
                display: inline-block;
                position: relative;
                width: 100%;
                height: 40rpx;

                .nick_name {
                    display: inline-block;
                    position: relative;
                    width: 100%;
                    height: 40rpx;
                    line-height: 40rpx;

                    .inner_text {
                        max-width: 60%;
                        display: inline-block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        word-break: break-all;
                        vertical-align: bottom;
                        /* float: left; */
                        font-size: 38rpx;
                        height: 40rpx;
                        line-height: 40rpx;
                    }

                }

            }

            .user_text {
                height: 28rpx;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #fff;
                line-height: 28rpx;
            }

            .level_wrap {
                position: relative;
                left: 0;
                bottom: 0rpx;
                width: 138rpx;
                height: 40rpx;
                vertical-align: bottom;
                line-height: 40rpx;
                background: rgba(172, 172, 172, 1);
                border-radius: 20rpx;
                margin-left: 14rpx;
                display: inline-block;
                text-align: center;

                .icon_img {
                    position: absolute;
                    left: 8rpx;
                    top: 6rpx;
                    display: inline-block;
                    width: 28rpx;
                    height: 28rpx;
                    line-height: 36rpx;
                    vertical-align: middle;
                }

                .level {
                    display: inline-block;
                    vertical-align: middle;
                    color: #fff;
                    height: 40rpx;
                    position: absolute;
                    top: 0;
                    left: 0;
                    padding-left: 42rpx;
                    line-height: 40rpx;
                    font-size: 20rpx;
                    letter-spacing: 0;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                }
            }

            .bt_wrap_btn {
                display: block;
                padding: 4px 20px;
                position: absolute;
                right: 20px;
                top: 56rpx;
                text-align: center;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 100;
                font-size: 24rpx;
                border-radius: 17px;
                color: rgba(255, 255, 255, .8);
                margin: 0 auto;
                letter-spacing: 2px;
                box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.1);
                background: linear-gradient(90deg, rgb(170, 130, 71) 0%, rgba(176, 143, 93, .7) 100%);
            }
        }

        .user_text_index {
            height: 28rpx;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            line-height: 28rpx;
            color: #999;

            .num {
                letter-spacing: 0;
                font-size: 22rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                margin-left: 10rpx;
            }

            .grey_dot {
                display: inline-block;
                width: 4rpx;
                height: 4rpx;
                background: rgba(216, 216, 216, 1);
                margin: 8rpx 10px;
                border-radius: 50%;
                position: relative;
                left: 0;
                top: 4rpx;
            }

            .jf_text {
                font-size: 20rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(153, 153, 153, 1);
            }

        }

        .toCenter {
            position: absolute;
            right: 20px;
            top: 94rpx;

            image {
                width: 16rpx;
                height: 24rpx;
                display: inline-block;
                opacity: .9;
            }
        }
    }
}
</style>
